<?php
use frontend\modules\yii2\widgets\layouts\markdown\Markdown;
use frontend\modules\yii2\widgets\layouts\example\Example;
use yii\bootstrap\Button;

$this->title = 'Yii Button widget小部件的使用方法';
$this->registerMetaTag([
    'name' => 'keywords',
    'content' => 'button,Yii,bootstrap3,widget,使用方法'
]);
$this->registerMetaTag([
    'name' => 'description',
    'content' => 'Yii中button相关小部件的使用方法介绍'
]);
$this->registerMetaTag([
    'name' => 'author',
    'content' => 'chenzhiwei'
]);


$content = <<<CONTENT
# Button按钮小部件的分类和使用
由组件`\yii\bootstrap\Button`提供支持，举例：
CONTENT;
echo Markdown::widget(["content" => $content]);

echo Example::widget([
    "html" => \yii\bootstrap\Button::widget(),
    "yii" => "echo \yii\bootstrap\Button::widget();",
    "bootstrap" => <<<BOOTSTRAP
<button id="w0" class="btn">Button</button>
BOOTSTRAP
]);

$content = <<<CONTENT
由上述代码可见，`\yii\bootstrap\Button`小部件在默认的情况下只是使用了`bootstrap`的`btn`类而已，另外的样式需要使用者自行添加，我们可以参照bootstrap官网，查询有哪些样式可用。
## a标签和input标签用作按钮
除了`button`标签，`bootstrap`同样支持`a`标签和`input`标签实现按钮的功能，举例如下：
CONTENT;
echo Markdown::widget(["content" => $content]);

echo Example::widget([
    "html" => \yii\bootstrap\BaseHtml::tag("a", "A Button", ["role" => "button", "class" => "btn btn-default", "style" => "margin-right: 10px;"]) .
        \yii\bootstrap\BaseHtml::tag("input", "Button", ["type" => "button", "class" => "btn btn-default", "name" => "button", "value" => "Input Button"]),
    "yii" => <<<Yii
echo \yii\bootstrap\BaseHtml::tag("a", "A Button", ["role" => "button", "class" => "btn btn-default"]);

echo \yii\bootstrap\BaseHtml::tag("input", "Button", ["type" => "button", "class" => "btn btn-default", "name" => "button", "value" => "Input Button"])
Yii,
    "bootstrap" => <<<BOOTSTRAP
<button id="w0" class="btn">Button</button>

<input type="button" class="btn btn-default" name="button" value="Input Button">
BOOTSTRAP
]);

$content = <<<CONTENT
> <span class="title">将a标签和input标签用作button的弊端</span>
- 导航和导航条组件只支持`<button>`元素；
- 如果 `<a>` 元素被作为按钮使用, 请务必为其设置 `role="button"` 属性；
- 有些浏览器并不支持非`<button>`元素构成的按钮。

## 预定义样式（颜色）    
CONTENT;
echo Markdown::widget(["content" => $content]);

echo Example::widget([
    "html" => \yii\bootstrap\Button::widget(["label" => "Default", "options" => ["class" => "btn btn-default", "style" => "margin-right:10px;"]]) .
        \yii\bootstrap\Button::widget(["label" => "Primary", "options" => ["class" => "btn btn-primary", "style" => "margin-right:10px;"]]) .
        \yii\bootstrap\Button::widget(["label" => "Success", "options" => ["class" => "btn btn-success", "style" => "margin-right:10px;"]]) .
        \yii\bootstrap\Button::widget(["label" => "Info", "options" => ["class" => "btn btn-info", "style" => "margin-right:10px;"]]) .
        \yii\bootstrap\Button::widget(["label" => "Warning", "options" => ["class" => "btn btn-warning", "style" => "margin-right:10px;"]]) .
        \yii\bootstrap\Button::widget(["label" => "Danger", "options" => ["class" => "btn btn-danger", "style" => "margin-right:10px;"]]) .
        \yii\bootstrap\Button::widget(["label" => "Link", "options" => ["class" => "btn btn-link", "style" => "margin-right:10px;"]])
    ,
    "yii" => <<<Yii
use \yii\bootstrap\Button;
echo Button::widget([
    "label" => "Default", 
    "options" => [
        "class" => "btn btn-default"
    ]
]);
echo Button::widget([
    "label" => "Primary", 
    "options" => [
        "class" => "btn btn-primary"
    ]
]);
echo Button::widget([
    "label" => "Success", 
    "options" => [
        "class" => "btn btn-success"
    ]
]);
echo Button::widget([
    "label" => "Info", 
    "options" => [
        "class" => "btn btn-info"
    ]
]);
echo Button::widget([
    "label" => "Warning", 
    "options" => [
        "class" => "btn btn-warning"
    ]
]);
echo Button::widget([
    "label" => "Danger", 
    "options" => [
        "class" => "btn btn-danger"
    ]
]);
echo Button::widget([
    "label" => "Link", 
    "options" => [
        "class" => "btn btn-link"
    ]
]);
Yii,
    "bootstrap" => <<<BOOTSTRAP
<button class="btn btn-default">
    Default
</button>

<button class="btn btn-primary">
    Primary
</button>

<button class="btn btn-success">
    Success
</button>

<button class="btn btn-info">
    Info
</button>

<button class="btn btn-warning">
    Warning
</button>

<button class="btn btn-danger">
    Danger
</button>

<button class="btn btn-link">
    Link
</button>
BOOTSTRAP
]);


$content = <<<CONTENT
## 按钮尺寸
使用`.btn-lg`，`.btn-sm`或`.btn-xs`就可以获得不同尺寸的按钮，举例如下：
CONTENT;
echo Markdown::widget(["content" => $content]);

echo Example::widget([
    "html" =>
        \yii\bootstrap\Button::widget(["label" => "大按钮", "options" => ["class" => "btn btn-success btn-lg", "style" => "margin-right:10px;"]]) .
        \yii\bootstrap\Button::widget(["label" => "默认尺寸", "options" => ["class" => "btn btn-success", "style" => "margin-right:10px;"]]) .
        \yii\bootstrap\Button::widget(["label" => "小按钮", "options" => ["class" => "btn btn-success btn-sm", "style" => "margin-right:10px;"]]) .
        \yii\bootstrap\Button::widget(["label" => "超小按钮", "options" => ["class" => "btn btn-success btn-xs", "style" => "margin-right:10px;"]])
    ,
    "yii" => <<<Yii
use \yii\bootstrap\Button;
echo Button::widget([
    "label" => "大按钮", 
    "options" => [
        "class" => "btn btn-success btn-lg"
    ]
]);
echo Button::widget([
    "label" => "默认尺寸", 
    "options" => [
        "class" => "btn btn-success"
    ]
]);
echo Button::widget([
    "label" => "小按钮", 
    "options" => [
        "class" => "btn btn-success btn-sm"
    ]
]);
echo Button::widget([
    "label" => "超小按钮", 
    "options" => [
        "class" => "btn btn-success btn-xs"
    ]
]);
Yii,
    "bootstrap" => <<<BOOTSTRAP
<button class="btn btn-success btn-lg">
    大按钮
</button>

<button class="btn btn-success">
    默认尺寸
</button>

<button class="btn btn-success btn-sm">
    小按钮
</button>

<button class="btn btn-success btn-xs">
    超小按钮
</button>
BOOTSTRAP
]);


$content = <<<CONTENT
## 块级按钮
使用块级按钮可以按100%的宽度拉长按钮，举例：
CONTENT;
echo Markdown::widget(["content" => $content]);

$html = [
    "example0" => [
        "html" => Button::widget(["label" => "块级按钮", "options" => ["class" => "btn btn-success btn-lg btn-block", "style" => "margin-right:10px;"]]),
        "yii" => <<<EY0
use \yii\bootstrap\Button;
echo Button::widget([
    "label" => "块级按钮", 
    "options" => [
        "class" => "btn btn-success btn-lg btn-block"
    ]
]);
EY0,
        "bootstrap" => <<<EB0
<button class="btn btn-success btn-lg btn-block">
    块级按钮
</button>
EB0
    ],
    "markdown0" => <<<M0
块级元素的应用一般用于表单的提交按钮，也常用于手机端的按钮，`btn-block`样式可以把按钮自动拉长到手机屏幕的宽度，便于用户操作，在`Yii`的后台登录页面的按钮样式就是一个例子：
![backend-login](/upload/articles/images/chrome_20210908145244.png)
## 禁用按钮
对于不同标签实现的按钮功能有不同的禁用方案：
- `<button>`标签可以添加属性`disabled="disabled"`实现禁用功能；
- `<a>`标签可以添加`.disabled`类实现禁用功能；
M0,
    "example1" => [
        "html" =>
            Button::widget(["label" => "Button 禁用", "options" => ["class" => "btn btn-success", "disabled" => "disabled", "style" => "margin-right:10px;"]]) .
            \yii\bootstrap\Html::tag("a", "a 禁用", ["class" => "btn btn-success disabled"])
        ,
        "yii" => <<<EY1
use \yii\bootstrap\Button;
use \yii\bootstrap\Html;
echo Button::widget([
    "label" => "Button 禁用", 
    "options" => [
        "class" => "btn btn-success", 
        "disabled" => "disabled"
    ]
]);
echo Html::tag("a", "a 禁用", [
    "class" => "btn btn-success disabled"
]);
EY1,
        "bootstrap" => <<<EB1
<button class="btn btn-success" disabled="disabled">
    Button 禁用
</button>

<a class="btn btn-success disabled">
    a 禁用
</a>
EB1
    ],
    "markdown2" => <<<M3
## 点击事件
正如给按钮添加`style`和`class`样式一样，也可以给它添加`click`点击事件：
M3
    ,
    "example3" => [
        "html" => Button::widget(["label" => "Click Me", "options" => ["class" => "btn btn-success", "onclick" => "alert('Hello World!')"]]),
        "yii" => <<<EY3
use \yii\bootstrap\Button;
echo Button::widget([
    "label" => "Click Me", 
    "options" => [
        "class" => "btn btn-success", 
        "onclick" => "alert('Hello World!')"
    ]
]);
EY3
        ,
        "bootstrap" => <<<EB3
<button class="btn btn-success" onclick="alert('Hello World!')">
    Click Me
</button>
EB3
    ]
    ,
    "markdown4" => <<<M3
## 防止连击
有时我们操作过快，会双击按钮，导致数据提交了2次，此时可以用`data-loading-text="Loading..."`来防止，举例如下：
M3
    ,
    "example4" => [
        "html" => Button::widget([
            "label" => "Save",
            "options" => [
                "class" => "btn btn-success",
                "data-loading-text" => "Loading...",
                "onclick" => <<<EF4
var btn = $(this).button('loading');
setTimeout(function(){
    btn.button('reset');
}, 2000);
EF4

            ]
        ]),
        "yii" => <<<EY3
use \yii\bootstrap\Button;
echo Button::widget([
    "label" => "Save",
    "options" => [
        "class" => "btn btn-success",
        "data-loading-text" => "Loading...",
        "onclick" => <<<JS
            var btn = $(this).button('loading');
            setTimeout(function(){
                btn.button('reset');
            }, 2000);
JS
    ]
]);
EY3
        ,
        "bootstrap" => <<<EB3
<button 
    class="btn btn-success" 
    data-loading-text="Loading..." 
    onclick="
        var btn = $(this).button('loading');
        setTimeout(function(){
            btn.button('reset');
        }, 2000);
    ">
    Save
</button>
EB3
    ]
    ,
    "markdown5" => <<<M5
> 注意： 从 v3.3.5 版本开始，此特性不再建议使用，并且已经在 v4 版本中删除了。
M5,
    "markdown1" => <<<M1
## Widget API
### 父类及继承关系
![button](/upload/articles/images/20210909105035.png)
### 属性说明
- tagName  
标签的名称，默认是`button`，无需变动；  
- label  
按钮文字，用于显示在按钮中间的文本，按照需要变化就好；
- encodeLabel  
如果label中出现html标签，此字段用于控制是否对其进行转换，比如说：
M1
    ,
    "example2" => [
        "html" =>
            Button::widget(["label" => "<div style='color:blue'>Encode Label</div>", "encodeLabel" => true, "options" => ["class" => "btn btn-success", "style" => "margin-right:10px"]]) .
            Button::widget(["label" => "<div style='color:blue'>Not Encode Label</div>", "encodeLabel" => false, "options" => ["class" => "btn btn-success"]])
        ,
        "yii" => <<<EY2
use \yii\bootstrap\Button;
echo Button::widget([
    "label" => "Encode Label", 
    "encodeLabel" => true, 
    "options" => [
        "class" => "btn btn-success"
   ]
]);
echo Button::widget([
    "label" => "Not Encode Label", 
    "encodeLabel" => false, 
    "options" => [
        "class" => "btn btn-success"
    ]
]);
EY2
        ,
        "bootstrap" => <<<EB2
<!-- encodeLabel = true -->
<button class="btn btn-success">
    &lt;div style='color:blue'&gt;Encode Label&lt;/div&gt;
</button>

<!-- encodeLabel = false -->
<button class="btn btn-success">
    <div style="color:blue">Not Encode Label</div>
</button>
EB2
    ]


];


foreach($html as $name => $item){
    switch ($name) {
        case strpos($name, "example") !== false:
            echo Example::widget($item);
            break;
        case strpos($name, "markdown") !== false:
            echo Markdown::widget(["content" => $item]);
            break;
        default:
            break;
    }
}